<template>
  <Form
    ref="upgoodsForm"
    :model="form"
    :rules="rules"
    @keydown.enter.native="handleSubmit"
    inline
    :label-width="80">
    <Row>
      <Col :md="8" :lg="5">
        <FormItem prop="gname" label="商品名称：">
          <Input type="text" v-model="form.gname" placeholder="请输入商品名称" />
        </FormItem>
      </Col>
      <Col :md="8" :lg="5">
        <FormItem prop="tel" label="手机号码：">
          <Input type="text" v-model="form.tel" placeholder="请输入手机号码" />
        </FormItem>
      </Col>
      <Col :md="8" :lg="4">
        <FormItem prop="code" label="取货码：">
          <Input type="text" v-model="form.code" placeholder="请输入取货码" />
        </FormItem>
      </Col>
      <Col :md="8" :lg="5">
        <FormItem prop="state" label="成团状态：" >
          <Select v-model="form.state">
            <Option value="all">
              全部
            </Option>
            <Option value="0">
              未成团
            </Option>
            <Option value="1">
              已成团
            </Option>
            <Option value="2">
              已购买
            </Option>
            <Option value="3">
              已取消
            </Option>
          </Select>
        </FormItem>
      </Col>
      <Col :md="8" :lg="5" style="text-align: right">
        <FormItem>
          <Button @click="handleSubmit" icon="md-search" type="primary">
            搜索
          </Button>
        </FormItem>
      </Col>
    </Row>
  </Form>
</template>
<script>
export default {
  name: 'UpgoodsForm',
  props: {
    nameRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    codeRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    stateRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    telRules: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      form: {
        gname: '',
        tel: '',
        code: '',
        state: 'all'
      }
    }
  },
  computed: {
    rules () {
      return {
        gname: this.nameRules,
        state: this.stateRules,
        code: this.codeRules,
        tel: this.telRules
      }
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.upgoodsForm.validate((valid) => {
        if (valid) {
          this.$emit('on-success-valid', {
            gname: this.form.gname,
            code: this.form.code,
            tel: this.form.tel,
            state: this.form.state !== 'all' ? this.form.state : ''
          })
        }
      })
    }
  }
}
</script>
